<template>
	<view class="content has-tabbar">
		<view class="my-top">
			<view v-if="ifLogin">
				<view class="avater-box">
					<view v-show="loadingFlag" class="loading-alert">
						<image class="loading-img" src="../../static/images/loading.gif"></image>
					</view>
					<image @click="goto('/pages/userinfo/index', true)" mode="aspectFit" @load="onload" class="avater" :src="infos.avater || '../../static/images/avater_default.png'"></image>
				</view>
				<view @click="goto('/pages/userinfo/index', true)" class="name">{{infos.name || '请实名认证'}}</view>
			</view>
			
			<view v-else class="login-box">
				<view class="avater-box">
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
				<image class="avater" src="../../static/images/avater_default.png"></image>
				<view class="name login-btn">登录</view>
				</view>
			</view>
			
			<view class="circle-back"></view>
		</view>
		
		<view class="my-content">
			<!-- <view class="title flexbox flexbox-middle"><view class="gan"></view>我的工具</view> -->
			
			<view class="content-box">
				<view class="content-item flexbox flexbox-middle">
					<button v-if="!ifLogin" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber2"></button>
					<view v-else @click="goto('/pages/myWorcard/index', true)" class="login-back"></view>
					<image class="my-icon" src="/static/images/my_icon1.png"></image>
					<view class="flexchild">我的工作证</view>
					<image class="more-icon" src="/static/images/more_icon.png"></image>
				</view>
				
				<view class="content-item flexbox flexbox-middle">
					<button v-if="!ifLogin" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber3"></button>
					<view v-else @click="goto('/pages/myphoto/index', true)" class="login-back"></view>
					<image class="my-icon" src="/static/images/my_icon2.png"></image>
					<view class="flexchild">我的证件照</view>
					<image class="more-icon" src="/static/images/more_icon.png"></image>
				</view>
				
			</view>
			
			<view class="content-box">
				<view  @click="goto('/pages/aboutUs/index', false)" class="content-item flexbox flexbox-middle">
					<image class="my-icon" src="/static/images/my_icon4.png"></image>
					<view class="flexchild">关于我们</view>
					<image class="more-icon" src="/static/images/more_icon.png"></image>
				</view>
				<view  @click="handleFeed" class="content-item flexbox flexbox-middle">
					<image class="my-icon" src="/static/images/my_icon5.png"></image>
					<view class="flexchild">用户反馈</view>
					<image class="more-icon" src="/static/images/more_icon.png"></image>
				</view>
			</view>
			
			
			
		</view>
		
		<tab-bar active="3"></tab-bar>
	</view>

</template>

<script>
	import { phoneLogin } from '@/static/js/utils.js'
	import tabBar from '@/components/tabBar/tabBar.vue'
	import config from "../../request/config.js";
	// 接入兔小巢插件
	const Tucao = requirePlugin('tucao').default;
	if(this){
	  Tucao.init(this);
	}else{
	  Tucao.set({
	    navigateTo: uni.navigateTo
	  });
	}
	export default {
		components: {
			tabBar
		},
		// computed: {  
		//           ...mapState(['userinfos'])
		//       },
		data() {
			return {
				infos: {},
				test: '1',
				ifLogin: false,
				loadingFlag: true
			}
		},
		onLoad(e) {
			let ctid = e.ctid || ''
			if (ctid) {
				uni.setStorageSync('ctid', ctid);
			}
		},
		onShow: function() {
			if (uni.getStorageSync('authorization')) {
				this.ifLogin = true
				this.getinfos()
			} else {
				this.ifLogin = false
				this.infos = {role: 'guest'}
			}
			uni.login({
				success: function(loginRes) {	
				}
			})
		},
		methods: {
			getinfos() {
				this.$HTTP.post('/wechat/userinfo', {}, false).then((res) => {
					//console.log(res)
					this.infos = res.data
					this.infos.avater = res.data.avatar ? config.BASEURL + res.data.avatar + '&.jpg' : '',
					uni.setStorageSync('role', res.data.role);
					uni.setStorageSync('phone', res.data.phone);
					uni.setStorageSync('bid', res.data.bid);
					uni.setStorageSync('user_id', res.data.userId);
					let ctid = e.ctid
				}).catch(err => {
					
				}) 
			},
			goto(url, needLogin) {
				if (!needLogin) {
					uni.navigateTo({
						url: url
					});
				} else {
					if (uni.getStorageSync('authorization')) {
						if(url === '/pages/userinfo/index' && this.infos.role === 'user') {
							uni.navigateTo({
								url: `/pages/openWz-step1/index`
							});
						} else if(url === '/pages/myphoto/index' && this.infos.role === 'user'){
							uni.navigateTo({
								url: `/pages/openWz-step1/index?rurl=${encodeURIComponent('/pages/myphoto/index')}`
							});
						} else {
							uni.navigateTo({
								url: url
							});
						}
					} else {
						uni.navigateTo({
							url: `/pages/login/index?rurl=${encodeURIComponent(url)}`
						});	
					}
					
				}
				
			},
			handleFeed() {
				// 兔小巢产品id
				this.infos.productId = 292653
				Tucao.go(this.infos)
				console.log(this.infos.openid, 7777)
			},
			onload() {
				setTimeout(() => {
					this.loadingFlag = false
				}, 500)
			},
			getPhoneNumber: function(e) {
				let that = this
				phoneLogin(e, function(res) {
					that.ifLogin = true
					that.getinfos()
					if (res.role === 'user') {
						uni.navigateTo({
							url: `/pages/openWz-step1/index`
						});
					}
				}, function(){})
			},
			getPhoneNumber2: function(e) {
				let that = this
				phoneLogin(e, function(res) {
					that.ifLogin = true
					uni.navigateTo({
						url: '/pages/myWorcard/index'
					});
				}, function(){})
			},
			getPhoneNumber3: function(e) {
				let that = this
				phoneLogin(e, function(res) {
					that.ifLogin = true
					if (res.role === 'user') {
						uni.navigateTo({
							url: `/pages/openWz-step1/index?rurl=${encodeURIComponent('/pages/myphoto/index')}`
						});
					} else {
						uni.navigateTo({
							url: '/pages/myphoto/index'
						});
					}
					
				}, function(){})
			}
		}


	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
	}
	.my-top {
		position: relative;
		height: 334rpx;
		background-color: #0579FE;
		text-align: center;
		.avater-box{
			position: relative;
			width: 136rpx;
			padding-top: 42rpx;
			margin: 0 auto 24rpx auto;
		}
		.loading-img {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			left: 50%;
			top: 50%;
			margin-left: -16rpx;
			margin-top: -16rpx;
			z-index: 99;
		}
		.avater {
			width: 136rpx;
			height: 136rpx;
			border-radius: 50%;
			background: #fff;
		}
		.loading-alert {
			position: absolute;
			width: 136rpx;
			height: 136rpx;
			left: 0;
			top: 42rpx;
			z-index: 99;
			border-radius: 50%;
			background-color: rgba(0,0,0,.7);
		}
		.name {
			font-size: 42rpx;
			color: #FFFFFF;
			font-weight: bold;
			line-height: 1.1;
		}
		.login-box {
			button {
				position: absolute;
				left: 0;
				top: 40rpx;
				right: 0;
				bottom: 0;
				z-index: 9;
				opacity: 0;
			}
		}
		.login-btn {
			position: relative;
			margin-top: 24rpx;
		}
	}
	.circle-back {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: -47rpx;
		height: 106rpx;
		border-radius: 50%;
		background-color: #0579FE;
	}
	.my-content {
		position: absolute;
		width: 670rpx;
		top: 305rpx;
		left: 50%;
		margin-left: -335rpx;
		// background-color: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;
		.content-box {
			margin-bottom: 24rpx;
			background-color: #FFFFFF;
		}
		.title {
			height: 40rpx;
			padding: 32rpx 16rpx 12rpx 16rpx;
			font-size: 32rpx;
			font-weight: bold;
			background-color: #FFFFFF;
			.gan {
				width: 6rpx;
				height: 30rpx;
				margin-right: 12rpx;
				background: #0579FE;
				border-radius: 5px;

			}
		}
		.my-icon {
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
		}
		.more-icon {
			width: 36rpx;
			height: 36rpx;
			margin-left: 16rpx;
		}
		.content-item {
			position: relative;
			height: 108rpx;
			padding: 0 30rpx;
			color: #666666;
			font-size: 32rpx;
			button,.login-back {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				z-index: 9;
				opacity: 0;
			}
		}
		.tip {
			font-size: 22rpx;
			color: #999999;
		}
	}
</style>
<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
</style>